<template>
  <div class="all">
    <header>
      <div class="div" @click="back">
        <img src="../../assets/返回.png" alt="">
        <span class="side">返回</span>
      </div>
      <div class="div">
        <span>选择人员</span>
      </div>
      <div class="div">
<!--        <span @click="onClickRight" class="side">-->
<!--              <img src="../../assets/蓝添加.png" alt="" style="width: 13px;height: 13px">-->
<!--              新增评估-->
<!--        </span>-->
          <span class="side" @click="next">下一步</span>
      </div>
    </header>
    <div class="menu" >
          <el-steps :active="menuIndex" align-center>
            <el-step title="" v-for="(item, index) in  menuList" :key="index"
                     @click.native="changeMenu(index, url)"
                     process-status="success"
                     :description="item.title">
              <template #icon>
                <div v-if="menuIndex >= index" style="width: 15px;height: 15px;">
                  <img src="../../assets/步骤选择.png" style="width: 15px;height: 15px;" alt="">
                </div>
                <div v-else style="width: 6px;height: 15px;background: #1DA4F2;display: flex;align-items: center;justify-content: center">
                  <a style="width: 6px;height: 6px;border-radius: 50%;background: white;display: flex;position: absolute;"></a>
                </div>
              </template>
            </el-step>
          </el-steps>
        </div >
    <div class="tabList topMore" >
      <!--      <div class="search personType">-->
      <!--        <el-select v-model="perType"-->
      <!--                   style="width: 130px;"-->
      <!--                   @change="changePer()"-->
      <!--                   :class="[perType.length > 0 ? 'select' : 'noselect']"-->
      <!--                   placeholder="人员类型">-->
      <!--          <el-option-->
      <!--            v-for="item in options1"-->
      <!--            :key="item.value"-->
      <!--            :label="item.label"-->
      <!--            :value="item.value">-->
      <!--          </el-option>-->
      <!--        </el-select>-->
      <!--      </div>-->
      <div class="search perName">
        <el-select v-model="perName"
                   style="width: 130px"
                   filterable
                   @volumechange="clickPerName"
                   @focus="clickPerName"
                   @change="changePer"
                   :class="[perName.length > 0 ? 'select' : 'noselect']"
                   placeholder="人员姓名">
          <el-option
            v-for="item in options2"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perPhone">
        <el-select v-model="perPhone"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerPhone"
                   @focus="clickPerPhone"
                   @change="changePer"
                   :class="[perPhone.length > 0 ? 'select' : 'noselect']"
                   placeholder="手机号码">
          <el-option
            v-for="item in options3"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perIDcard">
        <el-select v-model="perIDcard"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerIDcard"
                   @focus="clickPerIDcard"
                   @change="changePer"
                   :class="[perIDcard.length > 0 ? 'select' : 'noselect']"
                   placeholder="身份证号">
          <el-option
            v-for="item in options4"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
      <div class="search perAddress">
        <el-select v-model="perAddress"
                   style="width: 160px"
                   filterable
                   @volumechange="clickPerAddress"
                   @focus="clickPerAddress"
                   :class="[perAddress.length > 0 ? 'select' : 'noselect']"
                   @change="changePer"
                   placeholder="地址">
          <el-option
            style="max-width: 100vw"
            v-for="item in options5"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
      </div>
    </div>
    <div class="content"  ref="box">
      <ul v-for="(item, index) in peopleList"
          @click="clickRun(item)"
          :class="[selectUserid == item.USER_ID ? 'select' : '']"
          :key="index">
        <li class="li_header">
          <div class="li_header_left">
            <img class="photo" v-if="(item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined) && item.SEX === 1" src="../../assets/男患者@2x.png" alt="">
            <img class="photo" v-else-if="(item.PHOTO === null || item.PHOTO === '' || item.PHOTO === undefined) && item.SEX === 2" src="../../assets/女患者@2x.png" alt="">
            <img class="photo" v-else-if="item.PHOTO !== null || item.PHOTO !== '' || item.PHOTO !== undefined" :src="item.PHOTO" alt="">
            <span>{{item.name}}</span>
            <a v-show="Number(item.SEX) === 1">男</a>
            <a v-show="Number(item.SEX) === 2">女</a>
            <a v-show="item.age !== null && item.age !== undefined">{{item.age}}岁</a>
            <button class="peoTypeBtn"
                    style="background: #1da4f2"
                    v-show="Number(item.isself)===1">
              本人
            </button>
            <button class="peoTypeBtn"
                    style="background: rgba(46, 196, 155, 1)"
                    v-show="Number(item.issign)===1 && Number(item.isself) !== 1"
            >
              签约
            </button>
            <button class="peoTypeBtn"
                    style="background: rgba(249, 215, 57, 1)"
                    v-show="Number(item.iscircle)===1 && Number(item.issign)!==1">
              好友
            </button>
          </div >
          <div class="li_header_right">
<!--            <span v-show="Number(item.auditcount) > 0" style=" white-space: nowrap;margin-right: 5px">待审核</span>-->
<!--            <van-badge v-show="Number(item.auditcount) > 0" :content="item.auditcount" max="99" />-->
            <img src="../../assets/更多灰@2x.png" alt="">
          </div>
        </li>
        <li class="li_bottom">
          <p>联系电话：{{item.phone}}</p>
          <!--          <p>-->
          <!--            <span class="color">初步诊断：{{item.DIAGNOSE}}</span>-->
          <!--          </p>-->
          <p>联系地址：{{item.zuizhongAddress}}</p>
        </li>
      </ul>
      <van-loading size="24px" style="color: #1da4f2" vertical v-show="isLoading === true">加载中...</van-loading>
    </div>
    <van-dialog v-model="backShow"
                width="80%"
                confirm-button-color="#1da4f2"
                title="该记录未保存，是否确认退出？"
                @confirm="backConfirm()"
                show-cancel-button>
    </van-dialog>
  </div>
</template>

<script>
import $ from 'jquery'
import {Toast} from 'vant'
export default {
  name: 'PingGuSelectPeople',
  data () {
    return {
      isShowperType: false,
      // 人员类型
      perType: '',
      options1: [
        {
          value: '',
          label: '全部人员类型'
        }, {
          value: '1',
          label: '我的好友'
        }, {
          value: '2',
          label: '签约人员'
        }
        // , {
        //   value: '3',
        //   label: '非好友/非签约'
        // }
      ],
      // 人员姓名
      perName: '',
      options2: [],
      // 手机号码
      perPhone: '',
      options3: [],
      // 身份证
      perIDcard: '',
      options4: [],
      // 地址
      perAddress: '',
      options5: [],
      isLoading: true, // 加载是否显示
      peopleList: [],
      page: 1,
      isScroll: true,
      menuIndex: 0,
      menuList: [
        {
          title: '选择人员',
          url: '/selectAssessor'
        },
        {
          title: '信息录入',
          url: '/enterPingGu'
        },
        {
          title: '选择类型',
          url: '/assessmentType'
        },
        {
          title: '选择量表',
          url: '/selectionAssessment'
        },
        {
          title: '量表填写',
          url: '/assessmentScale'
        }
      ],
      type: this.$route.query.type,
      selectUserid: '',
      backShow: false,
      team_id: this.$route.query.team_id
    }
  },
  mounted () {
    if (sessionStorage.getItem('ACCEPT_USER_ID') !== null && sessionStorage.getItem('ACCEPT_USER_ID') !== undefined){
      this.selectUserid = sessionStorage.getItem('ACCEPT_USER_ID')
    }
    // $('.content').css('height', $(window).height() - $('.content').offset().top - 50 + 'px')
    this.getFindRoleJueSe()
    window.addEventListener('scroll', this.scrollBottom, true)
  },
  methods: {
    next () {
      if (this.selectUserid === '' || this.selectUserid == undefined || this.selectUserid == null) {
        Toast('请选择接受评定的人员')
        return false
      }
      // console.log(this.type)
      let path = this.menuList[this.menuIndex + 1].url
      this.$router.push({path: path, query: {type: this.type}})
    },
    // // 点击新增评估项目
    // onClickRight () {
    //   if (this.assess_type === '' || this.assess_type === undefined || this.assess_type === null) {
    //     // 类别 （门诊、住院、居家）
    //     sessionStorage.removeItem('assess_type')
    //   }
    //   // 初步诊断
    //   sessionStorage.removeItem('diagnose')
    //   // 目前状况
    //   sessionStorage.removeItem('current_status')
    //   sessionStorage.removeItem('isXiu')
    //   this.$router.push({path: '/selectAssessor', query: {'type': this.type}})
    // },
    // 滚动事件
    scrollBottom () {
      let scrollTop = this.$refs.box.scrollTop
      let clientHeight = this.$refs.box.clientHeight
      let scrollHeight = this.$refs.box.scrollHeight
      if (scrollHeight - scrollTop <= clientHeight + 300 && this.isScroll === true) {
        this.isScroll = false
        setTimeout(() => {
          this.page += 1
          this.isLoading = true
          // 移除滚动事件
          window.removeEventListener('scroll', this.scrollBottom, true)
          this.getFindRoleJueSe()
        }, 500)
      }
    },
    // 住址获取焦点
    clickPerAddress () {
      this.$http.getSelectPersonAddress({address: '', team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options5 = [{
            value: '',
            label: '不限地址'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.address,
                label: curr.zuizhongAddress
              }
              _this.options5.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 身份证号获取焦点
    clickPerIDcard () {
      this.$http.getSelectPersonIdnum({idnum: '', team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options4 = [{
            value: '',
            label: '不限身份证号'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.ID,
                label: curr.shenfenzhenghao
              }
              _this.options4.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 手机号码获取焦点
    clickPerPhone () {
      this.$http.getSelectPersonPhone({phone: '', team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options3 = [{
            value: '',
            label: '不限手机号码'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.PHONE,
                label: curr.phone
              }
              _this.options3.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 切换
    changePer () {
      this.page = 1
      this.getFindRoleJueSe()
    },
    // 人员姓名获取焦点
    clickPerName () {
      this.$http.getSelectPersonName({name: this.perName, team_id: this.team_id})
        .then(res => {
          console.log(res)
          var _this = this
          this.options2 = [{
            value: '',
            label: '不限人员姓名'
          }]
          if (res.data.status === 'success') {
            res.data.data.forEach(function (curr, index, arr) {
              var obj = {
                value: curr.NICK_NAME,
                label: curr.name
              }
              _this.options2.push(obj)
            })
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    clickRun (item) {
      this.selectUserid = item.USER_ID
      // var type = this.$utils.getUrlKey('type')
      window.sessionStorage['ACCEPT_USER_ID'] = item.USER_ID
      // // sessionStorage.setItem('assess_type', '')
      // this.$router.push({path: '/self', query: {'ACCEPT_USER_ID': item.USER_ID, 'type': type, 'assess_type': ''}})
    },
    // 获取所有好友及个人信息
    getFindRoleJueSe () {
      this.$http.findRoleJueSe({
        typeperson: this.perType, // 人员类型 1:好友;2:签约;3:非好友非签约
        name: this.perName, // 姓名
        phone: this.perPhone, // 手机号
        idnum: this.perIDcard, // 身份证号
        address: this.perAddress, // 地址
        page: this.page,
        team_id: this.team_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            var _this = this
            if (res.data.data.length > 0) {
              window.addEventListener('scroll', this.scrollBottom, true)
              this.isScroll = true
            } else {
              window.removeEventListener('scroll', this.scrollBottom, true)
              this.isScroll = false
            }
            if (this.page === 1) {
              this.peopleList = []
              this.peopleList = res.data.data
            } else {
              res.data.data.forEach(function (current, index, arr) {
                _this.peopleList.push(current)
              })
            }
            this.isLoading = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 点击返回
    back () {
      this.backShow = true
      // 返回上一页
      // this.$router.go(-1)
    },
    backConfirm () {
      // 返回上一页
      this.$router.go(-1)
      this.backShow = false
    }
  },
  destroyed () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  },
  beforeDestroy () {
    window.removeEventListener('scroll', this.scrollBottom, true)
  }
}
</script>

<style scoped>
ul, li {
  list-style: none;
}
.all{
  width: 100%;
  height: 100%;
  background: #FAF9FE;
  font-family: "PingFang SC";
  overflow: auto;
}
header{
  width: 100%;
  height: 44px;
  display: flex;
  align-items: center;
  background: #FFFFFF;
  border-bottom: 1px solid #E5E5E5;
  z-index: 99;
  position: sticky;
  top: 0;
}
.div{
  height: 100%;
  display: flex;
  align-items: center;
  font-size: 15px;
  font-weight: bold;
  font-family: "PingFang SC";
}
.div:nth-child(1),
.div:nth-child(3){
  width: 28%;
}
.div:nth-child(1) img{
  width: 7px;
  height: 13px;
  margin: 0 5px 0 15px;
}
.div:nth-child(2) {
  width: 45%;
  justify-content: center;
}
.div:nth-child(3) {
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.side{
  color: #1da4f2;
}
.tabList{
  height: 44px;
  width: 100%;
  background: #FFFFFF;
  /*background: #A5DBFA;*/
  display: flex;
  align-items: center;
  overflow-x: scroll;
  position: sticky;
}
.topSmall {
  top: 44px;
}
.topMore {
  top: 104px;
}
.tabList::-webkit-scrollbar{
  display: none;
}
.search{
  margin-left: 8px;
}
.content {
  overflow: scroll;
  padding: 10px;
  box-sizing: border-box;
}
.content ul{
  padding: 10px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-bottom: 5px;
  border-radius: 10px;
}
.content ul li{
  display: flex;
}
.peoTypeBtn{
  width: 30px;
  height: 20px;
  font-size: 11px;
  border-radius: 2px;
  border: none;
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-left: 10px;
}
.photo{
  width: 30px;
  height: 30px;
  border-radius: 50%;
  object-fit: cover;
  margin-right: 10px;
}
.li_header{
  width: 100%;
  height: 44px;
  display: flex;
  justify-content: space-between;
}
.li_header .li_header_left{
  width: 85%;
  display: flex;
  align-items: center;
}
.li_header .li_header_right{
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: flex-end;
}
.li_header div:nth-child(2) img{
  width: 7px;
  height: 13px;
  margin-left: 10px;
}
.li_header div a{
  margin-left: 10px;
}
.li_bottom{
  flex-direction: column;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #666666;
}
.li_bottom p{
  margin-bottom: 5px;
}
/deep/ .van-search__action{
  font-size: 15px;
  font-weight: bold;
  color: #1da4f2;
}
input{
  height:25px;
  border-radius: 15px;
  border: none;
  background: #FAF9FE;
  font-size: 13px;
}
input::placeholder{
  text-align: center;
}
.nameInput{
  width: 100px;
}
.phoneInput{
  width: 160px;
}
::v-deep .el-select-dropdown,
/deep/ .el-popper,
/deep/ .el-scrollbar{
  width: 100vw;
  max-width: 100vw !important;
}
/deep/ .el-input--small .el-input__inner{
  box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.15);
}
/deep/ .el-input--small .el-input__inner{
  color: #1DA4F2 !important;
  border-radius: 15px;
  background: rgba(29, 164, 242, 0.2) !important;
  border: 1px solid rgba(29, 164, 242, 0.2) !important;
}
/deep/ .is-focus .el-input__inner{
  background: rgba(29, 164, 242, 1) !important;
  border: 1px solid rgba(29, 164, 242, 1) !important;
  border-radius: 15px;
  color: white !important;
}
/deep/ .el-icon-arrow-up:before {
  content: "\E6E1";
  color: #1DA4F2 !important;
}
/deep/ .el-input__inner::placeholder{
  color:  #1DA4F2 !important;
}
/deep/  .is-focus .el-input__inner::placeholder{
  color:  #fff !important;
}
/deep/ .is-focus .el-icon-arrow-up:before {
  content: "\E6E1";
  color: #fff !important;
}
.menu{
  width: 100%;
  height: 60px;
  background: #1DA4F2;
  box-shadow: 0px 1px 0px 0px #E5E5E5;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow:hidden;
  position: sticky;
  top: 44px;
}
.select{
  background: rgba(29, 164, 242, 0.2) !important;
}
/*/ 选择框 开始样式/*/
/deep/ .el-steps--horizontal{
  width: 105%;
}
/deep/ .el-step.is-center .el-step__description{
  padding: 0;
}
/deep/ .el-step__description{
  margin: 0;
  font-size: 13px;
}
/deep/ .el-step__icon{
  width: auto;
  height: auto;
}
/deep/ .el-step__icon.is-text{
  border: none;
}
/deep/ .is-finish,
/deep/ .el-step__description.is-process{
  color: #fff;
}
/deep/ .el-step__description.is-finish{
  color: white !important;
}
/deep/ .el-step__description.is-wait{
  color: rgba(255, 255, 255, 0.7);
}
/deep/ .el-step__head.is-finish{
  border-color: #fff;
}
/deep/ .el-step__head.is-wait{
  border-color: transparent !important;
}
/deep/ .el-step__line{
  border-color: transparent !important;
}
/deep/ .el-step.is-horizontal .el-step__line{
  height: 1px;
  /*top:7px;*/
  top: 35%;
}
/deep/ .el-step__line{
  background: white;
}
/*/ 选择框 结束样式/*/
</style>
